<template>
  <div id="app" class="app">
    <VFormDesigner ref="vfDesignerRef" @rulesDesc="rulesDesc" @delItemDesigner="delItemDesigner"
      @editorItemDesigner="editorItemDesigner" @computerFun="computerFun" :designer-config="designerConfig"
      :field-list-data="fieldListData" :global-dsv="globalDsv">
      <!--
      <template #customToolButtons>
        <el-button type="text" @click="doTest2">测试btn</el-button>
      </template>
-->
    </VFormDesigner>
    <div class="center">

      <el-button type="primary" size="small">下一步</el-button>

    </div>

    <!-- 规则设置*** -->
    <el-dialog class="custom-dialog" title="规则设置" :visible.sync="showAddrules">
      <div slot="title">
        <b> 规则设置</b>
      </div>
      <section class="alertbody">
        <div class="flexbetween">
          <div>
            规则名称 <el-input v-model="search" style="width: 150px;"></el-input>
          </div>
          <el-button type="primary" @click="addRulesDialog = true">新增规则</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="规则编码">
            <template slot-scope="scope">
              等待后端接口字段
            </template>
          </el-table-column>
          <el-table-column prop="name" label="规则名称">
          </el-table-column>
          <el-table-column prop="address" label="创建时间">
            <template slot-scope="scope">
              等待后端接口字段
            </template>
          </el-table-column>
          <el-table-column prop="address" label="备注">
            <template slot-scope="scope">
              等待后端接口字段
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">

              <div class="flexbetween">
                <el-link @click="delClick(scope.row, scope.$index)" type="danger">
                  删除</el-link>
                <el-link @click="editorItemDesigner({ row: scope.row, index: scope.$index })" type="success">修改
                </el-link>
              </div>

            </template>
          </el-table-column>
        </el-table>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[10, 20, 30, 50]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
    </el-dialog>

    <!-- 添加规则 -->
    <el-dialog @closed="closedAddRulesDialog" width="50%" title="添加规则" :visible.sync="addRulesDialog">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="rulesNo" label="规则编号" :rules="[{ required: true, message: '规则编号', trigger: 'blur' }]">
              <el-input v-model="dynamicValidateForm.rulesNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item prop="rulesName" label="规则名称" :rules="[{ required: true, message: '规则名称', trigger: 'blur' }]">
              <el-input v-model="dynamicValidateForm.rulesName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <p>满足以下条件时</p>

        <div class="flex" v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key">
          <i @click.prevent="removeDomain(domain)" class="el-icon-remove" color="#ff0000"></i>


          <el-form-item :prop="'domains.' + index + '.value'"
            :rules="{ required: true, message: '域名不能为空', trigger: 'change' }">
            <!-- <el-input v-model="domain.value"></el-input> -->
            <el-select v-model="domain.value" placeholder="选择1">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="'domains.' + index + '.value2'" :rules="{
            required: true, message: '域名不能为空2', trigger: 'change'
          }">
            <!-- <el-input v-model="domain.value2"></el-input> -->
            <el-select v-model="domain.value2" placeholder="选择2">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="'domains.' + index + '.value3'" :rules="{
            required: true, message: '域名不能为空3', trigger: 'change'
          }">
            <!-- <el-input v-model="domain.value3"></el-input> -->
            <el-select v-model="domain.value3" placeholder="选择3">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>



        <el-form-item>
          <el-link type="primary" :underline="false" @click="addDomain">+ 添加条件</el-link>
        </el-form-item>


        <!-- 下面是触发一下效果 -->
        <p>触发以下效果</p>
        <div class="flex" :gutter="10" v-for="(domainstwo, index) in dynamicValidateForm.domainstwo"
          :key="domainstwo.key">

          <i @click.prevent="removeDomainTwo(domainstwo)" class="el-icon-remove red" color="#ff0000"></i>



          <el-form-item :prop="'domainstwo.' + index + '.value'" :rules="{
            required: true, message: '类型不能为空', trigger: 'blur'
          }">
            <el-input v-model="domainstwo.value"></el-input>
          </el-form-item>


          <el-form-item :prop="'domainstwo.' + index + '.value2'" :rules="{
            required: true, message: '字段不能为空', trigger: 'blur'
          }">
            <el-input v-model="domainstwo.value2"></el-input>
          </el-form-item>


          <el-form-item :prop="'domainstwo.' + index + '.arrytwo'" :rules="{
            required: true, message: '复选框', trigger: 'change'
          }">
            <!-- <el-input v-model="domainstwo.arrytwo"></el-input> -->
            <el-checkbox-group v-model="domainstwo.arrytwo">
              <el-checkbox label="必填" name="type"></el-checkbox>
              <el-checkbox label="是否可见" name="type"></el-checkbox>
              <el-checkbox label="是否可编辑" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- v-if="domainstwo.arrytwo.includes('是否可编辑')" -->
          <el-form-item>
            <el-link :underline="false" @click="editorData"><i class="el-icon-setting"></i> 编辑数据</el-link>
          </el-form-item>



        </div>
        <el-form-item>
          <el-link type="primary" :underline="false" @click="addDomainTwo">+ 添加结果</el-link>
        </el-form-item>
        <el-form-item>

          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑数据 -->
    <el-dialog @closed="closedEditorDialog" title="编辑数据" :visible.sync="editorDataForm">
      <el-form :model="dynamicValidateFormThree" ref="dynamicValidateFormThree" class="demo-dynamic">




        <!-- <el-form-item v-for="(domain, index) in dynamicValidateFormThree.domains" :label="'域名' + index" :key="domain.key"
          :prop="'domains.' + index + '.value'" :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }">
          <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomainThree(domain)">删除</el-button>
        </el-form-item> -->

        <div class="flex" v-for="(domainThree, index) in dynamicValidateFormThree.domainThree" :key="domainThree.key">
          <i @click.prevent="removeDomainThree(domainThree)" class="el-icon-remove" color="#ff0000"></i>


          <el-form-item :prop="'domainThree.' + index + '.value'"
            :rules="{ required: true, message: '数据1不能为空', trigger: 'change' }">
            <!-- <el-input v-model="domain.value"></el-input> -->
            <el-select v-model="domainThree.value" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="'domainThree.' + index + '.value2'"
            :rules="{ required: true, message: '数据2不能为空', trigger: 'change' }">
            <!-- <el-input v-model="domain.value"></el-input> -->
            <el-select v-model="domainThree.value2" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="'domainThree.' + index + '.value3'"
            :rules="{ required: true, message: '数据3不能为空', trigger: 'change' }">
            <!-- <el-input v-model="domain.value"></el-input> -->
            <el-select v-model="domainThree.value3" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :prop="'domainThree.' + index + '.value4'"
            :rules="{ required: true, message: '数据4不能为空', trigger: 'change' }">
            <!-- <el-input v-model="domain.value"></el-input> -->
            <el-select v-model="domainThree.value4" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

        </div>
        <el-form-item>

          <el-link type="primary" :underline="false" @click="addDomainThree">+ 添加数据</el-link>
        </el-form-item>
        <el-form-item>

          <el-button @click="resetFormThree('dynamicValidateFormThree')">重置</el-button>
          <el-button type="primary" @click="submitFormThree('dynamicValidateFormThree')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import VFormDesigner from './components/form-designer/index.vue'

export default {
  name: 'App',
  components: {
    VFormDesigner,
  },
  data() {
    return {
      showAddrules: false,
      addRulesDialog: false,//添加和修改用一个
      editorDataForm: false,
      postinput: "",
      designerConfig: {
        //logoHeader: false,
        //toolbarMaxWidth: 510
        exportCodeButton: false,  //是否显示导出代码按钮
        generateSFCButton: false,  //是否显示生成SFC按钮
        presetCssCode: '.test {}',
        eventCollapse: false,
        // resetFormJson:true,
      },

      /* 集成后端字段名称选择功能--演示 */
      fieldListData: {
        fieldList: [
          // {
          //   label: '客户名称',
          //   name: 'accountName'
          // },
          // {
          //   label: '手机号',
          //   name: 'mobilePhone'
          // },
          // {
          //   label: '订单明细.产品编号',
          //   name: 'productNo'
          // }
        ],
        subFormList: [
          {
            label: '订单明细',
            name: 'orderDetail'
          },
          {
            label: '发货明细',
            name: 'deliveryDetail'
          }
        ]
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
        testPort: 8080,
      },
      search: "",
      tableData: [],
      currentPage4: 1,
      dynamicValidateForm: {

        rulesNo: '',
        rulesName: "",
        domains: [{
          value: "",
          value2: "",
          value3: "",
          key: Date.now() + 10
        }],
        domainstwo: [
          {
            value: "",
            value2: "",
            key: Date.now() + 1,
            arrytwo: []
          }
        ]
      },
      dynamicValidateFormThree: {//编辑数据
        domainThree: [{
          value: '',
          value2: '',
          value3: '',
          value4: '',
          key: Date.now() + 2
        }]
      },

      newMetaFieldList: []

    }
  },
  provide() {
    return {
      tableDataArry: () => this.tableData,
      newMetaFieldListArry: () => this.newMetaFieldList
    }
  },
  mounted() {
    // console.log(this.$refs.vfDesignerRef);

    this.getNav();
    this.getTableData()
  },
  methods: {

    getNav() {
      // console.log(this.$refs.vfDesignerRef);
      setTimeout(() => {
        let metaFields = [
          {
            "entityName": "BasicInfo",
            "entityLabel": "基本信息",
            "fieldList": [
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "申请部门",
                "fieldId": "1"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "发起人",
                "fieldId": "2"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "制单日期",
                "fieldId": "3"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "textarea",
                "label": "事由",
                "fieldId": "4"
              }
            ],
            "detail": []
          },
          {
            "entityName": "TravelInfo",
            "entityLabel": "差旅申请",
            "fieldList": [
              {
                "dbName": "bus_pre_application",
                "dbFieldName": "applyCode",
                "type": "input",
                "label": "差旅申请单号",
                "fieldId": "5"
              },
              {
                "dbName": "bus_pre_application",
                "dbFieldName": "processName",
                "type": "input",
                "label": "单据类型",
                "fieldId": "6"
              },
              {
                "dbName": "bus_pre_application",
                "dbFieldName": "deptName",
                "type": "input",
                "label": "部门",
                "fieldId": "7"
              },
              {
                "dbName": "bus_pre_application",
                "dbFieldName": "userName",
                "type": "input",
                "label": "录入人",
                "fieldId": "8"
              },
              {
                "dbName": "bus_pre_application",
                "dbFieldName": "startTime",
                "type": "date",
                "label": "录入日期",
                "fieldId": "9"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "出行方式",
                "fieldId": "10"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "textarea",
                "label": "事由",
                "fieldId": "11"
              }
            ],
            "detail": []
          },
          {
            "entityName": "VehicleInfo",
            "entityLabel": "用车申请",
            "fieldList": [
              {
                "dbName": "bus_pre_use_car",
                "dbFieldName": "applyCode",
                "type": "input",
                "label": "用车申请单号",
                "fieldId": "12"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "单据类型",
                "fieldId": "13"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "部门",
                "fieldId": "14"
              },
              {
                "dbName": "bus_pre_use_car",
                "dbFieldName": "userName",
                "type": "input",
                "label": "录入人",
                "fieldId": "15"
              },
              {
                "dbName": "bus_pre_use_car",
                "dbFieldName": "startTime",
                "type": "date",
                "label": "录入日期",
                "fieldId": "16"
              },
              {
                "dbName": "bus_pre_use_car",
                "dbFieldName": "applyDescription",
                "type": "textarea",
                "label": "事由",
                "fieldId": "17"
              }
            ],
            "detail": []
          },
          {
            "entityName": "TransExp",
            "entityLabel": "交通费用",
            "fieldList": [
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "select",
                "label": "出差人员",
                "fieldId": "18"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "出行方式",
                "fieldId": "19"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "select",
                "label": "坐席",
                "fieldId": "20"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "开始时间",
                "fieldId": "21"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "结束时间",
                "fieldId": "22"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "cascader",
                "label": "出发地",
                "fieldId": "23"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "cascader",
                "label": "目的地",
                "fieldId": "24"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "费用",
                "fieldId": "25"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "交通费用总额",
                "fieldId": "26"
              }
            ],
            "detail": []
          },
          {
            "entityName": "TravelExp",
            "entityLabel": "差旅费用",
            "fieldList": [
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "出差人",
                "fieldId": "27"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "select",
                "label": "会议培训期间费用支付单位",
                "fieldId": "28"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "出发日期",
                "fieldId": "29"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "返程日期",
                "fieldId": "30"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "出差天数",
                "fieldId": "31"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "cascader",
                "label": "出发地点",
                "fieldId": "32"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "cascader",
                "label": "到达地点",
                "fieldId": "33"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "select",
                "label": "住宿类型",
                "fieldId": "34"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "住宿标准",
                "fieldId": "35"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "住宿总金额",
                "fieldId": "36"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "途中伙食补助标准",
                "fieldId": "37"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "途中伙食金额",
                "fieldId": "38"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "市内交通补助标准",
                "fieldId": "39"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "市内交通补助金额",
                "fieldId": "40"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "其他费用",
                "fieldId": "41"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "小计",
                "fieldId": "42"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "出差费用总额合计小写",
                "fieldId": "43"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "出差费用总额合计大写",
                "fieldId": "44"
              }
            ],
            "detail": []
          },
          {
            "entityName": "PaymentInfo",
            "entityLabel": "付款信息",
            "fieldList": [
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "textarea",
                "label": "费用内容",
                "fieldId": "45"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "select",
                "label": "收款类型",
                "fieldId": "46"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "报销金额",
                "fieldId": "47"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "审定报销金额",
                "fieldId": "48"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "刷卡日期",
                "fieldId": "49"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "收款人",
                "fieldId": "50"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "收款人账号",
                "fieldId": "51"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "关联银行流水",
                "fieldId": "52"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "开户行",
                "fieldId": "53"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "付款金额合计",
                "fieldId": "54"
              }
            ],
            "detail": []
          },
          {
            "entityName": "InvoiceInfo",
            "entityLabel": "发票信息",
            "fieldList": [
              {
                "dbName": null,
                "dbFieldName": "",
                "type": "input",
                "label": "发票号码",
                "fieldId": "55"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "发票代码",
                "fieldId": "56"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "校验码",
                "fieldId": "57"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "查验状态",
                "fieldId": "58"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "备注",
                "fieldId": "59"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "number",
                "label": "开票金额",
                "fieldId": "60"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "开票日期",
                "fieldId": "61"
              }
            ],
            "detail": []
          },
          {
            "entityName": "AttachInfo",
            "entityLabel": "附件信息",
            "fieldList": [
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "附件类型",
                "fieldId": "62"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "input",
                "label": "上传人",
                "fieldId": "63"
              },
              {
                "dbName": null,
                "dbFieldName": null,
                "type": "date",
                "label": "上传时间",
                "fieldId": "64"
              }
            ],
            "detail": []
          }
        ]

        const newMetaFieldList = metaFields.map(entity => ({
          ...entity,
          fieldList: entity.fieldList.map(field => {
            // 找到匹配 type 的 basicField
            const matchedField = this.$refs.vfDesignerRef.designer.basicFields.find(bf => bf.type === field.type);
            if (matchedField) {
              return {
                ...matchedField,
                displayName: field.label,
                options: {
                  ...matchedField.options,
                  name: field.dbName + '@' + field.dbFieldName,
                  label: field.label,
                  dbName: field.dbName,
                  dbFieldName: field.dbFieldName,
                  show: true,
                  keyName: field.dbName + '@' + field.dbFieldName,
                  fieldId: field.fieldId
                }
              };
            }
            // 如果未找到匹配项，返回原数据
            return field;
          })
        }))


        localStorage.setItem("metaFields", JSON.stringify(newMetaFieldList))
        this.newMetaFieldList = [...newMetaFieldList]

        // this.computerFun()

      }, 3000);
    },
    computerFun() { },
    getTableData() {
      setTimeout(() => {
        let result = [
          {
            id: 1,
            name: '规则名称1',

          }, {
            id: 2,
            name: '规则名称2'

          }, {
            id: 3,
            name: '规则名称3'

          }, {
            id: 4,
            name: '规则名称4',

          }
        ]

        this.tableData = result;
      }, 2000);
    },
    loadDynamicFields() {//************************************* */
      console.log('整合前:', this.designer.metaFieldList);
      // 构造新的数组
      const newMetaFieldList = this.designer.metaFieldList.map(entity => ({
        ...entity,
        fieldList: entity.fieldList.map(field => {
          // 找到匹配 type 的 basicField
          const matchedField = basicFields.find(bf => bf.type === field.type);
          if (matchedField) {
            return {
              ...matchedField,
              displayName: field.label,
              options: {
                ...matchedField.options,
                name: field.dbName + '.' + field.dbFieldName,
                label: field.label,
                dbName: field.dbName,
                dbFieldName: field.dbFieldName,
                show: true
              }
            };
          }
          // 如果未找到匹配项，返回原数据
          return field;
        })
      }));

      console.log('整合后', newMetaFieldList);

      this.dynamicMetaFields = { ...newMetaFieldList };
    },
    doTest() {
      let fieldList = this.$refs.vfDesignerRef.getFieldWidgets(null, true)
      console.log('test', fieldList)
    },

    doTest2() {
      let dataSchema = this.$refs.vfDesignerRef.buildFormDataSchema()
      console.info(dataSchema)
      console.info(JSON.stringify(dataSchema, null, "  "))
      alert(JSON.stringify(dataSchema))
    },

    yesSubmit() {
      this.$refs.vfDesignerRef.designer.formConfig.addRules = [
        {
          postinput: this.postinput
        }
      ]
      console.log(this.$refs.vfDesignerRef.designer);

    },


    rulesDesc() {
      this.showAddrules = true
    },
    delItemDesigner({ row, index }) {//删除一个
      console.log(row, index);
      this.tableData.splice(index, 1);
      this.$message.error('删除成功');

    },
    editorItemDesigner({ row, index }) {//修改一个
      console.log(row, index);
      this.addRulesDialog = true;
      // this.resetForm('')

      this.dynamicValidateForm = {

        rulesNo: '',
        rulesName: row.name,
        domains: [{
          value: "",
          value2: "",
          value3: "",
          key: Date.now() + 4
        }],
        domainstwo: [
          {
            value: "",
            value2: "",
            key: Date.now() + 5,
            arrytwo: []
          }
        ]
      }


    },
    delClick(row, index) {
      console.log(row, index);
      this.tableData.splice(index, 1)

    },
    editorClick(row, index) {
      console.log(row.index)
    },
    handleSizeChange(val) {//分页
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {//分页
      console.log(`当前页: ${val}`);
    },
    addRulesBtn() {//增加按钮



    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.dynamicValidateForm);

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    closedAddRulesDialog() {//关闭重置
      this.resetForm('dynamicValidateForm')
    },
    removeDomain(item) {//删除一个条件
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {//增加一个条件
      this.dynamicValidateForm.domains.push({
        value: "",
        value2: "",
        value3: "",
        key: Date.now() + 6
      });
    },
    removeDomainTwo(item) {//删除一个条件
      var index = this.dynamicValidateForm.domainstwo.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domainstwo.splice(index, 1)
      }
    },
    addDomainTwo() {//增加一个条件
      this.dynamicValidateForm.domainstwo.push({
        value: "",
        value2: "",
        arrytwo: [],
        key: Date.now() + 7
      });
    },
    editorData() {
      this.editorDataForm = true
    },
    // 下面是编辑数据的表单*********************

    submitFormThree(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetFormThree(formName) {
      this.$refs[formName].resetFields();
    },
    closedEditorDialog() {//关闭重置
      this.resetFormThree('dynamicValidateFormThree')
    },
    removeDomainThree(item) {
      var index = this.dynamicValidateFormThree.domainThree.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateFormThree.domainThree.splice(index, 1)
      }
    },
    addDomainThree() {
      this.dynamicValidateFormThree.domainThree.push({
        value: '',
        value2: '',
        value3: '',
        value4: '',
        key: Date.now() + 8
      });
    }



  }
}
</script>

<style lang="scss">
.app {
  .el-form-item {
    margin: 0px 5px 20px 5px !important;
  }

  .el-checkbox__label {
    padding-left: 3px;
  }


  .flexbetween {
    display: flex;
    justify-content: space-between;
  }

  .rbtn {
    display: inline-block;
    margin: 0 5px;
  }

  .el-icon-remove {
    margin-top: 13px;
    font-size: 20px;
  }

  .el-checkbox {
    margin-right: 10px !important;
  }



  .red {
    color: red;
  }

  .flex {
    display: flex;
  }

  .custom-dialog .el-dialog {

    position: fixed;
    right: 0px;
    height: 100vh;
    top: 0px;
    margin-top: 0 !important;
  }
}
</style>
